<!DOCTYPE html>
<!--
 1. 用到的其他文件
    leaflet.css, leaflet.js
    jquery.js
    echarts.js
    echarts_data.json
 2. 页面逻辑
    2.1 通过leaflet加载高德地图
    2.2 在地图上设置标记
    2.3 标记添加弹窗事件
    2.3 点击标记显示弹窗时加载Echarts图表
 3. echarts_data.json 格式
 {
    "data" :[{
        "id": "0",
        "location": [43.81586, 87.59103],
        "echarts_data":{...}
    },{
        "id": "1",
        "location": [43.8162, 87.61052],
        "echarts_data":{...}
    }
    ...
    ]
 }

 id : 标识当前数据
 location : 当前数据点的坐标
 echarts_data : 就是Echarts setOption里的那个option
 -->

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="initial-scale=1, maximum-scale=1,user-scalable=no" name="viewport"/>
    <title>地图+Echarts柱状图</title>

    <!-- leaflet css -->
    <link href="../leaflet/leaflet.css" rel="stylesheet"/>

    <script src="../js/jquery-3.1.1.js"></script>
    <!-- leaflet js -->
    <script src="../leaflet/leaflet.js"></script>
    <!-- echarts -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="map" style="height: 800px;">
</div>

<script>
    $(function () {
        // Leaflet Map Init
        function initMap() {
            var selectedPicture;
            var originalZIndex;

            // 设置 地图的坐标（纬度， 经度）,缩放等级
            var map = L.map('map', {
                zoomControl: false
            }).setView([43.81357, 87.59876], 15);

            // 加载高德地图
            L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?' + 'lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {subdomains: ["1", "2", "3", "4"]}).addTo(map);

            $.getJSON('../data/echarts_data.json', function (data) {
                // 遍历数据
                $.each(data.data, function (i, val) {
                    // 给地图里添加标记
                    var marker = L.marker(val.location).addTo(map);
                    // 定义Echarts图表大小
                    var content = '<div style="width: 220px; height: 220px;" id="marker' + val.id + '"></div>';
                    // 将定义的div放入leaflet的弹窗内
                    marker.bindPopup(content, {});
                    // 当 弹窗打开时，加载图表
                    marker.on('popupopen', function (e) {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('marker' + val.id));
                        // 从json里读取图表数据
                        option = val.echarts_data;
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    });
                });
            });
        }

        initMap();
    });
</script>
</body>
</html>
